<template>
  <!-- <div id="app"> -->
  <!-- <div id="nav"> -->
  <!-- <router-link to="/">Home</router-link> | -->
  <!-- <router-link to="/about">About</router-link> | -->
  <!-- <router-link to="/cart">购物车</router-link> -->
  <!-- <router-link to="/user">用户中心</router-link> -->
  <!-- </div> -->
  <!-- <router-view></router-view> -->
  <!-- </div> -->
  <div class="container">
    <div class="header">香蕉便宜了 {{ $store.state.count }}号店</div>
    <router-view class="content"></router-view>
    <div class="footer" v-show="isshowFotter">
      <!-- 实现底部导航点击哪个显示哪个页面，导航字体变色 绑定点击事件传递两个参数，
      参数一:该导航对应的页面的路由名字，用于实现页面跳转
      执行函数让使用this.$router.push（)实现页面跳转
      参数二：自定义的导航索引，用于改变导航文字的样式
      初始data中currentIndex为0，执行函数让currentIndex
      值等于传递的实参（当前导航对应的索引），绑定样式，
      点击时currentIndex的值被动态的改变为函数传的当前导航索引，
      三目判断如果currentIndex等于当前索引则给css中定义的nav
      active样式，其实只要点击必然是相等的，点击传递的参数在方法中赋值给了currentIndex,怎么可能不等，
      这样不就实现了点击时导航样式改变 -->
      <div
        :class="currentIndex == 0 ? 'nav active' : 'nav'"
        @click="navto('Home', 0)"
      >
        <i class="fa fa-home"></i>
        <span>首页</span>
      </div>
      <div
        :class="currentIndex == 1 ? 'nav active' : 'nav'"
        @click="navto('hot', 1)"
      >
        <i class="fa fa-fire"></i>
        <span>列表</span>
      </div>
      <div
        :class="currentIndex == 2 ? 'nav active' : 'nav'"
        @click="navto('cart', 2)"
      >
        <!-- 初始$store.state.cartcount为0不显示，数据后加购买按钮，点击时让cartcount加加，加后大于0，v-show为true显示 -->
        <span class="dot" v-show="$store.state.cartcount > 0">
          {{ $store.state.cartcount }}
        </span>
        <i class="fa fa-shopping-cart"></i>
        <span>购物车</span>
      </div>
      <div
        :class="currentIndex == 3 ? 'nav active' : 'nav'"
        @click="navto('user', 3)"
      >
        <i class="fa fa-user"></i>
        <span>我的</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentIndex: 0,
      isshowFotter: true
    }
  },
  watch: {
    $route(v) {
      // console.log(v)
      // 打印如下
      // fullPath: "/login"
      // hash: ""
      // matched: [{…}]
      // meta: {ishideFotter: true}
      // name: "login"
      // params: {}
      // path: "/login"
      // query: {}
      // 不写形参v时打印和上面一样
      // console.log(this.$route)
      // 也就是当页面跳转到该路由时，route里存的一些信息其中有我们通过meta属性自定义的信息比如在登录注册的 路由中定义的ishideFotter隐藏导航通过他的值判断 是否隐藏，这里我们想要的效果是在登录注册页面隐藏底部导航
      if (v.meta.ishideFotter) {
        // 如果路由信息属性ishideFotter：true
        // 既隐藏
        this.isshowFotter = false
      } else {
        this.isshowFotter = true
      }
    }
  },
  // 点击底部导航实现页面（路由）跳转的处理
  methods: {
    navto(routeName, conIndex) {
      this.currentIndex = conIndex
      // 在路由3.多版本中，点击跳转到一样的路由地址会报错
      // (比如当前在购物车导航在点击购物车就会报错提示)
      // 解决方法加catch错误处理
      this.$router.push({ name: routeName }).catch(() => {})
    }
  }
}
</script>
// 不加scoped在全局都有效
<style>
html,
body,
#app {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
.container {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.header {
  height: 40px;
  text-align: center;
  background-color: deeppink;
  color: white;
  line-height: 40px;
  font-weight: bolder;
}
.content {
  flex: 1;
  overflow: auto;
}
.footer {
  height: 50px;
  /* background-color: #0f0; */
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #000;
  position: relative;
}
.nav i {
  font-size: 1.4rem;
}
.nav span {
  font-size: 0.6rem;
}
.nav.active {
  color: deeppink;
}
img {
  max-width: 100%;
}
.dot {
  background-color: deeppink;
  color: white;
  border-radius: 50%;
  padding: 0.2rem;
  position: absolute;
  top: -10px;
  left: 16px;
  width: 1rem;
  text-align: center;
  height: 1rem;
}
</style>
